<template>
  <div>
   <Loading  class="animated" :class="{bounceInDown:showLoad,none:!showLoad}"/>
    <!-- 处理图片-->
    <div v-transfer-dom>
      <x-dialog :show.sync="showDailog" class="dialog-demo">
        <div class="img-box">
          <img id="image"  :src="beforeSoloveImgUrl" style="max-width:100%">
        </div>
        <div>
          <x-icon type="ios-close" size="38"  @click.passive="clearInputImg"></x-icon>
             <x-icon type="ios-checkmark" class="icon-red" size="38"  @click.passive="getImg('#image')"></x-icon>
        </div>
      </x-dialog>
    </div>
    <alert v-model="alert.show" :title="alert.title" :content="alert.msg"></alert>
    <div class="contianer">
      <x-input title="昵称:" v-model="user.nickname" required :max='8' class="unickname"  placeholder="八个字内(*必填)" ></x-input>
      <selector title="地市:" :options="options"  placeholder="(*必填)"  required @on-change="chanegVal" v-model="user.cityId" ></selector>
        <!-- <popup-radio title="地市:" :options="options" placeholder="(*必填)" @on-hide="chanegVal" v-model="user.cityId" ></popup-radio> -->
      <selector title="学校:" :options="schoolOptions"  placeholder="(*必填)"  required  v-model="user.universityId" ></selector>
        <!-- <popup-radio title="学校:" :options="schoolOptions" placeholder="(*必填)"  v-model="user.universityId" ></popup-radio> -->
      <x-input title="院系:" placeholder="选择学校院系(*必填)" required :max='8' v-model="user.department"></x-input>
      <x-textarea title="参赛宣言:" placeholder="请填写参赛宣言不超过15字(*必填)"  v-model="user.declaration"  :show-counter="true" :rows="2" :max="15" :autosize="true"></x-textarea>
        <p class="info"><span>温馨提示</span>* 提交并审核成功后，将无法修改</p>
      <p class="info"><span>实名认证</span>* 认证信息不会公布，只作为活动领奖唯一凭证</p>
      <x-input title="真实姓名:" v-model="user.realName" required :value="user.realName" placeholder="(*必填)"></x-input>
      <x-input title="手机号码:" v-model="user.phone" required :is-type="checkMb" :value="user.phone"  placeholder="(*必填)"></x-input>
      <x-input title="身份证号:" v-model="user.cardNo" required :is-type="checkIdentify" :value="user.cardNo" placeholder="(*必填)"></x-input>
       <p class="photo">参赛照片<span>*（可上传1~4张照片，照片过大可能影响像素）</span></p>
      <!-- 上传图片 -->
      <cell-box>
        <ul class="container-img-box">
          <li v-for="(items,key) of imgListUrl" :key="key"><img :src="items" alt="">
            <span class="cancel-btn" @click.passive="cancelImg(key)" v-if="rebackFillImg" >
              <icon type="cancel"></icon>
            </span>
            <span class="font-img"  v-if="key==0"></span>
          </li>
          <li >
          <label id="img" for="upimg" class="upimg animated" v-if="rebackFillImg" :class="{none:!showUpImg}">
          </label>
            <input type="file" id="upimg" accept="image/*" hidden @change="handleImgChange" ref="inputer">
        <!-- <button @click.passive="upLoadImg(upimgList)">上传图片</button> -->
          </li>
        </ul>
      </cell-box>
      <cell-box>
        <p class="cancel-img" @click.passive="resetImgs"  v-if="!rebackFillImg" ></p>
      </cell-box>
      <!-- 上传视频-->
      <cell-box>
        <label id="video" for="upVideo" class="animated upVideo" v-if="rebackFillVideo">
        </label>
        <input type="file" id="upVideo" accept="video/*" @change="handleVideoChange" hidden ref="inputvideo">
        <!-- <button @click.passive="upLoadVideo()">上传视频</button> -->
      </cell-box>
      <cell-box >
        <p @click.passive="showVideo=true" class="myvideo" v-if="!rebackFillVideo"><Myvideo v-if="rebackvideoUrl"   :videoUrl="rebackvideoUrl" :showDailog="showVideo" @changeDialog="getStatus"/></p>
      </cell-box>
      <cell-box  >
        <p class="cancel-img" @click.passive="resetVideo" v-if="!rebackFillVideo" ></p>
      </cell-box>
     
      <x-progress :percent="videoPercent" :show-cancel="false" class="animated" ></x-progress>
        <p class="videoinfo animated" :class="{suc:showUpVideo,err:!showUpVideo}" ><span >{{videoinfo}}</span></p>
       <p><check-icon :value.sync="checkRuler">我已阅读<a class="rulerbtn" @click.passive="ruler()">用户须知协议</a> </check-icon></p>
       <cell-box>
         <p class="sub-btn" v-if="!ifAuditing" @click.passive="sendUserInfo()"></p>
         <p class="sub-btn" v-if="ifAuditing" @click.passive="auditingUserInfo()"></p>
      </cell-box>
      <cell-box class="none">
       <video id="myvideo" :src="videoUrl"></video>
      </cell-box>
    </div>
</div>
</template>
<script>
import Loading from '@/components/com/Loading';
import Myvideo from '@/components/com/Myvideo';
import { idCardNoUtil, getAge } from '@/assets/lib/identifyCk.js'
import { CellBox, Alert, GroupTitle, Popup, PopupRadio, XProgress, Group, XButton, XInput, Selector, XTextarea, PopupPicker, Icon, XDialog, CheckIcon, TransferDomDirective as TransferDom } from 'vux'
import Qs from 'qs'
import {  getServerHost,
  preventMove,
  GetRequest,
  checkMobile,
  checkQq} from '@/assets/lib/tool.js'

import { setTimeout } from 'timers';
const BIGSIZE = (1024 * 1024);
export default {
  directives: {
    TransferDom
  },
  components: {
    Myvideo,
    Loading,
    Group,
    GroupTitle,
    XInput,
    Selector,
    PopupPicker,
    XTextarea,
    CellBox,
    XButton,
    Icon,
    XDialog,
    CheckIcon,
    Alert,
    XProgress,
    Popup,
    PopupRadio
  },
  data() {
    return {
      options: [],
      school: [],
      checkRuler: false,
      fileName: '',
      schoolOptions: ['请先选择学校'],
      schoolRead: true,
      videoPercent: 0,
      imgLoad: '',
      alert: {
        show: false,
        title: '',
        msg: ''
      },
      rebackFillVideo: !false,//重新提交视频
      rebackFillImg: !false,//重新提交图片
      rebackvideoUrl: '',//显示视频的视频源
      showVideo: false,
      user: {
        openid: GetRequest().openid,
        nickname: '',
        cityId: '',
        universityId: '',
        department: '',
        declaration: '',
        realName: '',
        phone: '',
        cardNo: '',
        image1Path: '',
        image2Path: '',
        image3Path: '',
        image4Path: '',
        videoPath: ''
      },
      ifAuditing: false,
      showLoad: false,
      videoinfo: '',
      imgListUrl: [],
      upimgList: [],
      videoUrl: '',
      beforeSoloveImgUrl: require('@/assets/img/panel.png'),//处理之前的图片链接 默认一张图片
      showDailog: false, //处理弹窗
      numberValue: 0,
      showUpImg: true,
      showUpVideo: true,
      openid: GetRequest().openid,
      pathUrl: 'http://118.212.184.170/wxjx/file',
      upImgUrl: 'http://118.212.184.170/wxjx/goddess/upload/uploadImage',
      upVideoUrl: 'http://118.212.184.170/wxjx/goddess/upload/uploadVedio',
      queryList: '/wxjx/goddess/common/university/queryList',
      submitUserUrl: '/wxjx/goddess/common/user/submit',
      updateUrl: '/wxjx/goddess/common/user/update',
      queryInfoMyselfUrl: '/wxjx/goddess/common/user/queryInfoMyself',
    }
  },
  watch: {
    user(val) {
      return val;
    }
  },
  mounted() {

    //获取学校列表
    this.getSchoolList();
    //初始化裁剪图片
    this.initImg();
    //获取用户之前提交的数据
    this.getUserInfor();
  },
  watch: {
    beforeSoloveImgUrl(val) {
      console.log(val);
      return val;
    },
    schoolOptions(val) {
      console.log(val);
      return val;
    }
  },
  computed: {

  },
  methods: {
    //规则
    ruler() {

    },
    //重新提交图片
    resetImgs() {
      this.rebackFillImg = !this.rebackFillImg;
      this.imgListUrl = [];
    },
    //重设图片
    resetVideo() {
      this.rebackFillVideo = !this.rebackFillVideo;
      this.videoPath = '';

    },
    getStatus(e) {
      this.showVideo = false;
    },
    //读取用户提交的信息
    getUserInfor() {
      var vm = this;
      this.$http.get(getServerHost() + this.queryInfoMyselfUrl, {
        params: {
          openid: this.openid
        }
      }).then(rs => {
        console.log(rs);
        rs = rs.data;
        if ('200' == rs.code) {
          vm.ifAuditing = true;// 判断是否修改信息
          let userData = rs.res;
          vm.rebackFillImg = !vm.rebackFillImg;
          vm.rebackFillVideo = !vm.rebackFillVideo;
          //如果没之前没有上传视频
          if (!userData.videoPath) {
            vm.rebackFillVideo = true;
          }
          // user.universityId
          vm.user = {
            openid: userData.openid,
            nickname: userData.nickname,
            cityId: userData.cityId,
            universityId: userData.universityId,
            department: userData.department,
            declaration: userData.declaration,
            realName: userData.realName,
            phone: userData.phone,
            cardNo: userData.cardNo,
            image1Path: userData.image1Path,
            image2Path: userData.image2Path,
            image3Path: userData.image3Path,
            image4Path: userData.image4Path,
            videoPath: userData.videoPath
          }
          if (userData.image1Path) {
            vm.imgListUrl.push(vm.pathUrl + userData.image1Path)
          }
          if (userData.image2Path) {
            vm.imgListUrl.push(vm.pathUrl + userData.image2Path)
          }
          if (userData.image3Path) {
            vm.imgListUrl.push(vm.pathUrl + userData.image3Path)
          } if (userData.image4Path) {
            vm.imgListUrl.push(vm.pathUrl + userData.image4Path)
          }
          if (userData.videoPath) {
            vm.rebackvideoUrl = vm.pathUrl + userData.videoPath
          }
        }
      })
    },
    //修改用户信息
    auditingUserInfo() {
      var vm = this;
      var list = [];
      vm.judgeInfo().then(rs => {
        console.log(rs);
        if ('999' == rs) {
          return;
        } else if ('200' == rs) {
          vm.showLoad = true;
          //上传图片和添加的视频给后台

          Promise.all([...vm.upLoadImg(vm.upimgList), vm.upLoadVideo()]).then((result) => {
            console.log('rs', result);
            //将返回的视频和图片资源放到提交对象中
            result.map(items => {
              if (undefined == items) {
                return;
              }
              list.push(items.value);
              if ('img' == items.key) {
                [vm.user.image1Path, vm.user.image2Path, vm.user.image3Path, vm.user.image4Path] = [...list]
                console.log(vm.user);
              } else if ('video' == items.key) {
                vm.user.videoPath = items.value;
              }
            })
            //提交数据给后台,内部函数
            auditingForm();
          }).catch(result => {
            vm.showLoad = false;
            vm.alert.show = true;
            vm.alert.title = '提示';
            vm.alert.msg = result;
            console.log(result);
          })
        }
      })
      //修改用户信息
      function auditingForm() {
        var config = {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
          }
        }
        vm.$http.post(getServerHost() + vm.updateUrl, Qs.stringify(vm.user), config).then(result => {
          console.log(result);
          result = result.data;
          if ('200' == result.code) {
            vm.showLoad = false;
            vm.alert.show = true;
            vm.alert.title = '提示';
            vm.alert.msg = '上传成功！';
            vm.$router.push({ name: 'auditing', query: { openid: vm.openid } });
          } else {
            vm.alert.show = true;
            vm.alert.title = '提示';
            vm.alert.msg = result.msg;
          }
        })
      }
    },
    //提交用户信息
    sendUserInfo() {
      var vm = this;
      var list = [];
      vm.judgeInfo().then(rs => {
        console.log(rs);
        if ('999' == rs) {
          return;
        } else if ('200' == rs) {
          vm.showLoad = true;
          //上传图片和添加的视频给后台
          Promise.all([...vm.upLoadImg(vm.upimgList), vm.upLoadVideo()]).then((result) => {
            console.log('rs', result);

            //将返回的视频和图片资源放到提交对象中
            result.map(items => {
              if (undefined == items) {
                return;
              }
              list.push(items.value);
              if ('img' == items.key) {
                [vm.user.image1Path, vm.user.image2Path, vm.user.image3Path, vm.user.image4Path] = [...list]
                console.log(vm.user);
              } else if ('video' == items.key) {
                vm.user.videoPath = items.value;
              }
            })
            //提交数据给后台,内部函数
            sendForm();
          }).catch(result => {
            vm.showLoad = false;
            vm.alert.show = true;
            vm.alert.title = '提示';
            vm.alert.msg = result;
            console.log(result);
          })
        }
      })

      //提交ajax
      function sendForm() {
        var config = {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
          }
        }
        vm.$http.post(getServerHost() + vm.submitUserUrl, Qs.stringify(vm.user), config).then(result => {
          console.log(result);
          result = result.data;
          if ('200' == result.code) {
            vm.showLoad = false;
            vm.alert.show = true;
            vm.alert.title = '提示';
            vm.alert.msg = '上传成功！';
            vm.$router.push({ name: 'auditing', query: { openid: vm.openid } });
          } else {
            vm.alert.show = true;
            vm.alert.title = '提示';
            vm.alert.msg = result.msg;
          }
        })
      }
    },
    //判断信息是否正确
    judgeInfo() {
      var vm = this;
      return new Promise((resolve, reject) => {
        if (!Boolean(vm.user.openid) || !Boolean(vm.user.nickname) || !Boolean(vm.user.cityId) || !Boolean(vm.user.universityId) || !Boolean(vm.user.declaration) || !Boolean(vm.user.realName) || !checkMobile(vm.user.phone) || !idCardNoUtil.checkIdCardNo(vm.user.cardNo)) {
          console.log(vm.user);
          vm.alert.show = true;
          vm.alert.title = '提示';
          vm.alert.msg = '请根据提示补全用户信息';
          resolve('999')
        } else {
          console.log(vm.user);
          if (!vm.checkRuler) {
            vm.alert.show = true;
            vm.alert.title = '提示';
            vm.alert.msg = '请同意用户协议';
            resolve('999')
          } else {
            resolve('200')
          }

        }
      })
    },
    // 验证手机号
    checkMb() {
      var vm = this;
      if (checkMobile(vm.user.phone)) {
        return { valid: true };
      } else {
        return { valid: false, msg: '请输入正确的手机号' };
      }
    },
    //验证身份证号码
    checkIdentify() {
      var vm = this;
      console.log(idCardNoUtil.checkIdCardNo(vm.user.cardNo));
      if (idCardNoUtil.checkIdCardNo(vm.user.cardNo)) {
        return { valid: true };
      } else {
        return { valid: false, msg: '请输入正确的身份证号' };
      }
    },
    //获取学校的信息
    getSchoolList() {
      var vm = this;
      this.$http(getServerHost() + this.queryList).then(rs => {
        rs = rs.data;
        vm.options = rs.res.cityList;
        vm.school = rs.res.universityList;
      })
    },
    // 显示学校
    chanegVal(value) {
      console.log(value);
      this.value2 = value;
      this.schoolRead = false;
      let schoolmap = [];
      this.school.map(items => {
        if (items.cityId == value) {
          schoolmap.push({ key: items.key, value: items.value })
        }
      })
      this.schoolOptions = schoolmap;
    },
    //删除图片数组和清空input框
    cancelImg(index) {
      this.$refs.inputer.value = '';
      this.imgListUrl.splice(index, 1)
      this.upimgList.splice(index, 1);
      console.log(this.imgListUrl, this.upimgList);
    },
    //上传图片
    upLoadImg(imglist) {
      console.log('upimg');
      console.log(imglist);
      let vm = this;
      if (!Boolean(imglist.length)) {
        vm.alert.show = true;
        vm.alert.title = '提示';
        vm.alert.msg = '请添加图片';
        return;
      }


      let imgUrl = [];
      if (vm.user.image1Path) {
        //提交数据给后台,内部函数
        return [];
      }
      //上传generator函数
      function* loopUploadimg(imglist) {
        for (let blob of imglist) {
          //上传图片
          yield (function () {
            return new Promise((resolve, reject) => {
              var config = {
                headers: {
                  'Content-Type': 'multipart/form-data'
                }
              }
              var formdata = new FormData()
              formdata.append('file', blob)
              formdata.append('openid', vm.openid)
              formdata.append('filename', 'blob.png');
              vm.$http.post(vm.upImgUrl, formdata, config).then(res => {
                if ('200' == res.data.code) {
                  resolve({ key: 'img', value: res.data.res })
                } else {
                  reject(res.data.msg)
                }
              })
            })

          })();
        }
        return imgUrl;
      }

      //返回promsie用于整个上传promise的子promise 
      //多个promise对象上传返回
      // Promise.all([...loopUploadimg(imglist)]).then(result => {
      //   //全局数组接受返回的图片地址的值
      //   [vm.user.image1Path, vm.user.image2Path, vm.user.image3Path, vm.user.image4Path] = [...result]
      //   console.log(vm.user);
      //   return resolve(result);
      // })
      return [...loopUploadimg(imglist)]



    },
    //上传视频
    upLoadVideo() {
      let vm = this;
      if (!Boolean(this.$refs.inputvideo.files[0])) {
        vm.alert.show = true;
        vm.alert.title = '提示';
        vm.alert.msg = '请添加视频';
        return;
      }
      var formdata = new FormData();
      let videoUrl = URL.createObjectURL(this.$refs.inputvideo.files[0]);
      formdata.append('file', this.$refs.inputvideo.files[0])
      // formdata.append('fileName', this.fileName)
      formdata.append('openid', vm.openid)
      return new Promise((resolve, reject) => {
        var config = {
          headers: {
            'Content-Type': 'multipart/form-data'
          },
          onUploadProgress: progressEvent => {
            var complete = (progressEvent.loaded / progressEvent.total * 100 | 0)
            vm.videoPercent = complete;
          }
        }

        this.$http.post(this.upVideoUrl, formdata, config).then(res => {
          console.log(res.data);
          if ('200' == res.data.code) {
            vm.showUpVideo = true;
            resolve({ key: 'video', value: res.data.res })
          } else {
            vm.showUpVideo = false;
            vm.videoinfo = res.data.msg;
            reject(res.data.msg)
          }
        })
      })
    },
    //添加视频
    handleVideoChange() {
      console.log(this);
      var vm = this;
      let inputDOM = this.$refs.inputvideo;
      let file = inputDOM.files[0];
      let size = Math.floor(file.size / BIGSIZE);
      vm.videoinfo = ``
      this.videoUrl = URL.createObjectURL(file)
      this.fileText = '';
      vm.alert.show = false;
      if (size > 15) {
        vm.alert.show = true;
        vm.alert.title = '提示';
        vm.alert.msg = '文件过大';
        return;
      }

      new Promise((resolve, reject) => {
        //判断时长
        var myvideo = document.getElementById('myvideo')
        myvideo.addEventListener("loadedmetadata", function () {
          var tol = this.duration;//获取总时长
          if (tol > 15) {
            vm.alert.show = true;
            vm.alert.title = '提示';
            vm.alert.msg = '文件时长过长(最长15s),请重新添加';
            vm.videoinfo = `文件时长过长(最长15s),请重新添加`;
            resolve(false);
          } else {
            vm.videoinfo = `添加成功,等待提交!`
            reject(true);
          }
        });
      }).then(result => {
        if (result) {
          vm.showUpVideo = false;
          //将图片base64传给父容器
          vm.fileName = file.name;
          vm.onChange && vm.onChange(file, inputDOM.value);
        } else {
          throw new Error(result);
        }
      }, error => {
        this.$refs.inputvideo.values = ''
      })

    },
    //初始化图片
    initImg() {
      var vm = this;
      var _this = $('#image');
      setTimeout(() => {
        _this.cropper({
          aspectRatio: 8 / 5,//图片的宽高比
          scalable: false,//是否允许缩放图像。
          zoomOnTouch: false,//是否可以通过拖动触摸来放大图像。
          zoomable: false,//是否允许放大图像。
          cropBoxResizable: false,//是否通过拖动来调整剪裁框的大小。
          modal: false,//黑色模态框
          dragMode: 'none',//‘crop’: 可以产生一个新的裁剪框3 
          // ‘move’: 只可以移动3
          // ‘none’: 什么也不处理
          responsive: false,
          restore: false,
          autoCropArea: 1,
          checkOrientation: true,
          toggleDragModeOnDblclick: false,//点击两次时可以在“crop”和“move”之间切换拖拽模式
          viewMode: 1,//视图模式
          // 0：没有限制，3可以移动到2外。
          // 1: 3只能在2内移动。
          // 2：2图片 不全部铺满1 （即缩小时可以有一边出现空隙）
          // 3：2图片填充整个1
          preview: ".small",//预览容器
          crop: function (e) {
            // console.log(e);
          },
          ready: function () {
            // vm.orientImg();
            // vm.showDailog = true;
          },
          cropmove: function () {
          }
        });
      }, 500)

    },
    //旋转
    rotate() {
      $('#image').cropper('rotate', 45);
    },
    //删除添加的图片文件
    clearInputImg() {
      this.$refs.inputer.value = '';
      this.showDailog = false;
    },
    //获取裁剪后的图片
    getImg(el) {
      let vm = this;
      //**dataURL to blob**
      function dataURLtoBlob(dataurl) {
        var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
          bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
        while (n--) {
          u8arr[n] = bstr.charCodeAt(n);
        }
        return new Blob([u8arr], { type: mime });
      }
      vm.showDailog = false;
      new Promise((resolve, reject) => {
        var canvas = $(el).cropper('getCroppedCanvas');//获取当前截取的图片的大小
        var base64Url = canvas.toDataURL('image/jpeg')
        // var base64Url_mini = canvas.toDataURL('image/jpeg', 0.5)
        // console.log('after', dataURLtoBlob(base64Url_mini));
        canvas.toBlob(function (e) {
          // console.log(e);  //生成Blob的图片格式
          //输出图片blob流文件
          resolve(e);
        })
        // $('.cavans>img').attr('src', base64Url)  //在body显示出canvas元素
        // $('.cavans2>img').attr('src', base64Url_mini) //在body显示出canvas元素
      }).then(file => {
        console.log(file);
        vm.imgListUrl.push(URL.createObjectURL(file));
        vm.upimgList.push(file);
        if (vm.imgListUrl.length == 4) {
          vm.showUpImg = false;
        } else {
          vm.showUpImg = true;
        }
        vm.fileText = '';
        //将图片base64传给父容器
      })

    },
    //添加图片
    handleImgChange() {
      var vm = this;
      let inputDOM = this.$refs.inputer
      vm.file = inputDOM.files[0];
      vm.fileName = vm.file.name;
      if (inputDOM.files[0]) {
        vm.showDailog = true;
      }
      console.log('imgurl', this.imgListUrl);
      //判断图片的大小
      let size = Math.floor(this.file.size / 1024);
      if (size > 1024 * 10) {
        // 这里可以加个文件大小控制
        this.file = this.canvasMinify(this.file, this.fileName);
      }
      vm.beforeSoloveImgUrl = URL.createObjectURL(this.file);
      console.log('beforec', this.file);
      $('#image').cropper('replace', vm.beforeSoloveImgUrl, false);

      // this.file = this.canvasMinify(this.file, this.fileName);
      vm.onChange && vm.onChange(vm.file, inputDOM.value);
    },
    //canvas压缩图片
    canvasMinify(file, name) {
      let vm = this;
      console.log(file);
      var reader = new FileReader();
      let base64img = '';
      reader.readAsDataURL(file);
      reader.onload = function (e) {
        var imgObj = new Image();
        imgObj.src = this.result;
        imgObj.onload = function (a) {
          var canvas = document.createElement('canvas');
          canvas.width = imgObj.width;
          canvas.height = imgObj.height;
          var ctx = canvas.getContext("2d");
          ctx.drawImage(imgObj, 0, 0, canvas.width, canvas.height);
          base64img = canvas.toDataURL("image/jpeg", 0.8);
          // console.log(base64img);
          return vm.convertBase64UrlToBlob(base64img, name)
        }
      }
    },
    //base64转blob
    convertBase64UrlToBlob(urlData, name) {
      var bytes = window.atob(urlData.split(',')[1]);        //去掉url的头，并转换为byte  

      //处理异常,将ascii码小于0的转换为大于0  
      var ab = new ArrayBuffer(bytes.length);
      var ia = new Uint8Array(ab);
      for (var i = 0; i < bytes.length; i++) {
        ia[i] = bytes.charCodeAt(i);
      }
      console.log(new Blob([ab], { type: 'image/png' }));
      return new Blob([ab], { type: 'image/png' });
    }
  }
}
</script>
<style lang="less" scoped >
@import "../../assets/style/common.min.css";
.none {
  display: none;
}
::-webkit-input-placeholder {
  color: red !important;
}
.preview-c {
  position: fixed;
  top: 0;
  width: 100%;
  .small {
    margin: 0 auto;
    overflow: hidden;
    width: 480px;
    height: 270px;
  }
}
.popcontainer {
  overflow: hidden;
  width: 100%;
  height: 100%;
}
.canvas {
  width: 100%;
}
.btn-group {
  position: fixed;
  bottom: 20px;
  width: 100%;
  span {
    width: 25%;
    padding: 10px;
  }
  span:first-child {
    width: 50px;
    background: #e4393c;
    z-index: 999;
  }
  span:nth-child(2) {
    width: 50px;
    background: green;
    z-index: 999;
  }
  span:nth-child(3) {
    width: 50px;
    background: blue;
    z-index: 999;
  }
}
video {
  width: 640px;
  height: auto;
}
.info {
  padding: 10px 15px;
  text-align: left;
  font-size: 18px;
  margin-left: 15px;
  span {
    font-size: 24px;
    color: #ff5a65;
    font-weight: bold;
  }
}
.suc {
  color: #017c0a;
}
.err {
  color: #c10909;
}
.videoinfo {
  text-align: left;
  font-weight: bold;
}
.rulerbtn {
  color: #f6244f;
  text-decoration: underline;
}
.myvideo {
  margin: 0 auto;
  width: 246px;
  min-height: 161px;
  background: url("../../assets/img/video.png") no-repeat;
  background-size: 246px 161px;
}
.sub-btn {
  margin: 0 auto;
  width: 244px;
  height: 68px;
  background: url("../../assets/img/submit.png") no-repeat;
  background-size: 100% 100%;
}
.upimg {
  display: inline-block;
  width: 117px;
  height: 115px;
  background: url("../../assets/img/upimg.png") no-repeat;
  background-size: 100% 100%;
}
.font-img {
  display: inline-block;
  width: 103px;
  height: 31px;
  background: url("../../assets/img/font-img.png") no-repeat;
  background-size: 100% 100%;
}
.upVideo {
  display: inline-block;
  width: 515px;
  height: 109px;
  background: url("../../assets/img/upvideo.png") no-repeat;
  background-size: 100% 100%;
}
.cancel-img {
  align-self: center;
  margin: 0 auto;
  width: 245px;
  height: 76px;
  background: url("../../assets/img/auditing-btns.png") no-repeat 0 -82px;
  background-size: 528px 168px;
}
.photo {
  padding: 10px 15px;
  text-align: left;
  font-size: 24px;
  span {
    margin-left: 15px;
    color: #ff5a65;
    font-size: 18px;
    font-weight: bold;
  }
}
.contianer {
  width: 547px;
  margin: 0 auto;
  font-size: 24px;
}
.container-img-box {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  li {
    width: 50%;
    min-height: 50px;
    position: relative;
    display: flex;
    padding: 0 10px;
    flex-direction: column;
    justify-content: space-between;
    img {
      padding: 5px;
      border-radius: 10px;
      border: 2px solid #fff;
      width: 100%;
    }
    .font-img {
      align-items: center;
      margin: auto;
    }
    .cancel-btn {
      position: absolute;
      right: 0;
      top: 0;
      z-index: 666;
    }
  }
}
</style>
